<template>
	<view class="edit-copyfor-item">
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"
			style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: #ffffff;
			border-bottom: 1px solid #ebedf0;">
			<view :style="{height: titleNavHeight + 'px', top: statusBarHeight + 'px', width: '100%'}"
				class="nav-bar">
				<u-icon name="arrow-left" size="42" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
					@click="go_back"></u-icon>
				<text class="text">抄送设置</text>
			</view>
		</view>
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"></view>
		
		<view class="filter-box">
			<u-search v-model="searchVal" placeholder="请输入搜索关键词" 
			shape="square" bg-color="#F7F8FA"
			@search="onSearch" :show-action="false"/>
		</view>
		<view class="type-select-box inset-cell-group" style="border-radius: 8px;">
			<u-cell-group :border-bottom="false" :border-top="false">
				<u-cell-item  :arrow="true"  :value="copyTypeValue.text"
					@click="actionSheet=true" :center="true" :border-bottom="false" :border-top="false">
					<template #title>
						<span class="custom-title">抄送类型 <i class="require-span">*</i> </span>
					</template>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<scroll-view scroll-y="true" class="scrollView" :style="{'--headerHeight': headerHeight}">
			<view class="copy-item-select inset-cell-group" style="border-radius: 8px;">
				<u-cell-group  :border="false">
					<!-- 抄送人 -->
					<CustomSelectPanel
						ref="userList"
						v-if="copyTypeValue.id === 'user'"
						height="100%"
						v-model="selectCopyForItem"
						:value="selectCopyForItem"
						:props="{text: 'name', value: 'loginName', disabled: copyItemDisabled}"
						:multiple="true"
						:dataList="loadSysUserData"
					/>
					<!-- 抄送部门 -->
					<CustomCascaderPanel
						ref="deptList" 
						v-if="copyTypeValue.id === 'dept'"
						v-model="selectCopyForItem"
						:options="deptTree"
						:props="{text: 'name', value: 'id', disabled: copyItemDisabled}"
						:multiple="true"
						:time='time'
						:filter="filterListItem"
					/>
					<!-- 抄送角色 -->
					<CustomSelectPanel
						ref="dataList"
						v-if="copyTypeValue.id === 'role'"
						height="100%"
						v-model="selectCopyForItem"
						:props="{text: 'name', value: 'id', disabled: copyItemDisabled}"
						:multiple="true"
						:dataList="roleList"
						:filter="filterListItem"
					/>
					<!-- 抄送岗位 / 审批人部门岗位 / 审批人同级部门岗位 / 审批人上级部门岗位 -->
					<CustomSelectPanel
						ref="dataList"
						v-if="['allDeptPost', 'selfDeptPost', 'siblingDeptPost', 'upDeptPost'].indexOf(copyTypeValue.id) !== -1"
						height="100%"
						v-model="selectCopyForItem"
						:props="{text: 'name', value: 'id', disabled: copyItemDisabled}"
						:multiple="true"
						:dataList="postList"
						:filter="filterListItem"
					/>
					<!-- 指定部门岗位 -->
					<CustomCascaderPanel
						ref="deptPostList" 
						v-if="copyTypeValue.id === 'deptPost'"
						v-model="selectCopyForItem"
						:options="deptPostTree"
						:props="{text: 'name', value: 'id', disabled: 'disabled', showCheckbox: 'showCheckbox', disabled: copyItemDisabled}"
						:multiple="true"
						:time='time'
						:filter="filterListItem" 
					/>
				</u-cell-group>
			</view>
		</scroll-view>
		
		
		<view style="width: 100%;height: 128rpx;"></view>
		<view class="floor">
			<u-button class="recet-btn" @click="resetClick" :custom-style="customStyle1">重选</u-button>
			<u-button type="primary" @click="confirmClick" :custom-style="customStyle"
			:disabled="selectCopyForItem.length <= 0 && copyTypeValue.id !== 'deptPostLeader' && copyTypeValue.id !== 'upDeptPostLeader'">
				确定{{ selectCopyForItem.length > 0 ? (' (' + selectCopyForItem.length + ')') : '' }}
			</u-button>
		</view>
		<!-- 抄送类型弹窗 -->
		<u-action-sheet v-model="actionSheet" :list="list" @click="onSelectType" border-radius="40" cancel-text="取消" />
	</view>
</template>

<script>
	import {
		treeDataTranslate
	} from '@/utils';
	import {
		getHeadImageUrl
	} from '@/utils';
	import { SysCommonBizController } from '@/api';
	import CustomCascaderPanel from '@/views/components/CustomCascaderPanel/index.vue';
	import CustomSelectPanel from '@/views/components/CustomSelectPanel/index.vue';
	import {
		SysFlowCopyForType
	} from '@/utils/constant.js'
	import {getBoundingClientRect} from "@/utils";

	export default {
		components: {
			CustomCascaderPanel,
			CustomSelectPanel
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			const {
				windowWidth,
				statusBarHeight
			} = uni.getSystemInfoSync()
			const rect = getBoundingClientRect(windowWidth, statusBarHeight);
			return {
				windowWidth: windowWidth,
				statusBarHeight: statusBarHeight,
				titleNavHeight: (rect.top - statusBarHeight) * 2 + rect.height,
				emptyWidth: rect.left - 10,
				headerHeight:0,
				// 抄送类型选择弹窗是否显示
				actionSheet: false,
				// 选中的抄送数据
				selectCopyForItem: [],
				// 筛选条件
				searchVal: '',
				// 选中的过滤类型值
				copyTypeValue: {},
				list: SysFlowCopyForType,
				time: 0,
				customStyle:{
					borderRadius: '0'
				},
				customStyle1:{
					borderRadius: '0',
					border:'1px solid #ebedf0'
				}
			}
		},
		props: {
			// 已选中的抄送项
			selectedData: {
				type: Object
			},
			// 角色列表
			roleList: {
				type: Array
			},
			// 部门列表
			deptList: {
				type: Array
			},
			// 岗位列表
			postList: {
				type: Array
			},
			// 部门岗位列表
			deptPostList: {
				type: Array
			}
		},
		methods: {
			go_back(){
				this.onBack()
			},
			changeCheck(v) {
				this.selectCopyForItem = v;
			},
			// 选项过滤方法
			filterListItem(data) {
				if (data == null || data.name == null) return false;
				return this.searchVal == null || this.searchVal === '' || data.name.indexOf(this.searchVal) !== -1;
			},
			onBack(data) {
				// console.log(data)
				this.$emit('close', data);
			},
			// 获取选中的用户列表
			getSelectUserList() {
				return new Promise((resolve, reject) => {
					let params = {
						widgetType: 'upms_user',
						fieldName: 'loginName',
						fieldValues: (this.selectCopyForItem || []).join(',')
					}
					SysCommonBizController.viewByIds(this, params).then(res => {
						// console.log(res)
						if (Array.isArray(res)) {
							res.forEach(item => {
								item.id = item.loginName;
								item.name = item.showName;
							})
							// console.log(res)
							resolve(res);
						} else {
							resolve([]);
						}
					}).catch(e => {
						reject(e);
					});
				});
			},
			// 根据抄送类型获取抄送数据
			async buildCopyForItemList() {
				let type = this.copyTypeValue.id;
				let value;
				if (type === 'user') {
					let userList = await this.getSelectUserList();
					if (Array.isArray(userList) && userList.length > 0) {
						value = userList.map(userItem => {
							return {
								...userItem,
								headImageUrl: getHeadImageUrl(userItem)
							}
						});
					}
				} else if (type === 'dept') {
					let deptList = this.$refs.deptList ? this.$refs.deptList.getSelectDataList() : [];
					console.log(deptList);
					if (Array.isArray(deptList) && deptList.length > 0) {
						value = deptList.map(item => {
							let deptItem = null;
							if (Array.isArray(item) && item.length > 0) {
								deptItem = item[item.length - 1];
							}
							return (deptItem != null) ? {
								...deptItem,
								name: item.map(item => item.name).join(' / ')
							} : null;
						}).filter(item => item != null);
						console.log(value)
					}
				} else if (this.copyTypeValue.id === 'deptPostLeader' || this.copyTypeValue.id ===
					'upDeptPostLeader') {
					value = [];
				} else if (this.copyTypeValue.id === 'deptPost') {
					let deptPostList = this.$refs.deptPostList ? this.$refs.deptPostList.getSelectDataList() : [];
					if (Array.isArray(deptPostList) && deptPostList.length > 0) {
						value = deptPostList.map(item => {
							let deptPostItem = null;
							if (Array.isArray(item) && item.length > 0) {
								deptPostItem = item[item.length - 1];
							}
							return deptPostItem != null ? {
								id: deptPostItem.id,
								name: item.map(item => item.name).join(' / ')
							} : null;
						}).filter(item => item != null);
					}
				} else {
					let dataList = this.$refs.dataList ? this.$refs.dataList.getSelectDataList() : [];
					if (Array.isArray(dataList) && dataList.length > 0) {
						value = dataList.map(item => {
							return {
								...item
							}
						});
					}
				}
				return value != null ? {
					type,
					value
				} : null;
			},
			async confirmClick() {
				let formData = await this.buildCopyForItemList();
				// console.log(formData)
				this.onBack(formData);
			},
			// 获取用户列表
			loadSysUserData(pageNum) {
				const showName = this.searchVal || this.$parent.$parent.searchVal;
				return new Promise((resolve, reject) => {
					let params = {
						widgetType: 'upms_user',
						pageParam: {
							pageNum: pageNum,
							pageSize: 20,
							count: false
						},
						filter: {
							showName: showName
						}
					}
					SysCommonBizController.list(this, params).then(res => {
						res.dataList.forEach(item => {
							item.id = item.loginName;
							item.name = item.showName;
						});
						resolve({
							dataList: res.dataList,
							totalCount: res.totalCount
						})
					}).catch(e => {
						reject(e);
					})
				});
			},
			onSelectType(index) {
				this.actionSheet = false;
				this.copyTypeValue = SysFlowCopyForType[index];
				this.selectCopyForItem = [];
			},
			resetClick() {
				this.selectCopyForItem = [];
			},
			// 选项是否禁用方法
			copyItemDisabled(data) {
				if (this.selectedData == null) return false;
				let selectList = this.selectedData[this.copyTypeValue.id];
				if (!Array.isArray(selectList)) return false;
				return selectList.filter(item => {
					return item.id === data.id;
				}).length > 0;
			},
			// 查询
			onSearch() {
				if (this.$refs.userList) this.$refs.userList.reset();
				if (this.$refs.deptList) this.$refs.deptList.reset();
				if (this.$refs.dataList) this.$refs.dataList.reset();
				if (this.$refs.deptPostList) this.$refs.deptPostList.reset();
				this.time++;
			},
		},
		created() {
			this.copyTypeValue = SysFlowCopyForType[0]
			this.headerHeight = this.titleNavHeight + this.statusBarHeight + 5 + 'px'
		},
		computed: {
			deptTree() {
				let tempList = (this.deptList || []).map(item => {
					return {
						...item,
						checked: false
					}
				});
				tempList = treeDataTranslate(tempList);
				return tempList;
			},
			deptPostTree() {
				if (Array.isArray(this.deptList) && Array.isArray(this.deptPostList)) {
					let tempList = this.deptList.map(item => {
						return {
							...item,
							isDept: true,
							showCheckbox: false
						}
					}).concat(this.deptPostList.map(deptPost => {
						return {
							...deptPost,
							parentId: deptPost.deptId,
							id: deptPost.deptPostId,
							name: deptPost.postShowName,
							showCheckbox: true
						}
					}));
					tempList = treeDataTranslate(tempList);
					return tempList;
				}
				return [];
			}
		}
	}
</script>

<style lang="less">
	.nav-bar {
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;
	
			.text {
				width: calc(100vw - 80px);
				color: #323233;
				font-weight: 500;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				justify-items: center;
			}
	
			.nav-right {
				display: flex;
	
				.mobile-font {
					color: #707070;
					font-size: 36rpx;
	
					&+.mobile-font {
						margin-left: 12rpx;
					}
				}
			}
		}
	.custom-title{
		display: flex;
		flex-direction: row;
	}
	.require-span {
	  color: red;
	  font-size: 36rpx;
	  margin-left: 4rpx;
	}
	.edit-copyfor-item {
		display: flex;
		flex-direction: column;
		background: #F6F7F9;
		width: 100vw;
		height: 100vh;

		.filter-box {
			flex-grow: 0;
			flex-shrink: 0;
			padding: 20rpx 24rpx;
			background-color: #fff;
		}

		.type-select-box {
			flex-grow: 0;
			flex-shrink: 0;
		}

		.inset-cell-group {
			margin: 32rpx;
			overflow: hidden;
			border-radius: 8rpx;
		}
		.scrollView{
			width: calc(100%);
			height: calc(100vh - 300px);
		}
		.copy-item-select {
			// flex-grow: 1;
			flex-shrink: 1;
			margin-top: 0;
			// height: 0;
			// overflow-y: scroll;
			background-color: #fff;
		}

		.floor {
			height: 128rpx;
			padding: 0 20rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			.recet-btn{
				width: 30%;
				height: 80rpx;
				line-height: 80rpx;
				background: #ffffff;
				border-radius:0;
				// border: 1px solid #ebedf0;
			}
			.recet-btn::after{
				border-radius: 0;
				border: none;
			}
			button::after{
				border-radius: 0;
				border: none;
			}
			&>u-button,
			&>.u-btn{
				// width: 60%;
				&:first-child {
					width: 30%;
				}
				&:last-child {
					width: 60%;
				}
			}
		}
	}

	.copy-item-select /deep/ .u-cell-box {
		height: 100%;
	}
</style>

<style>
.u-action-sheet-item{
	color: #323233;
}
.u-cell{
	padding: 20rpx 32rpx !important;
}
.u-border-bottom:after{
	border: none;
}
.u-border-top:after{
	border: none;
}
</style>